<template>
  <view>
    <h1>文章分类统计</h1>
    <div ref="chartRef" class="chart-container"></div>
  </view>
    
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { ref, onMounted } from 'vue';
  import { dashboard } from '@/api';
  
  const chartRef = ref(null);
  const data = ref([]);
  
  onMounted(async () => {
    const response = await dashboard.postClassificationStatistics();
    console.log(response.data.data); // 假设API返回的数据
    // 假设res.data.data是API返回的数据数组
    data.value = response.data.data.map(item => item.post_count);
    const days = response.data.data.map(item => item.category_name);
    initializeChart(days);
  });
  
  const initializeChart = (days) => {
    if (!data.value || !chartRef.value) return;
  
    const myChart = echarts.init(chartRef.value);
    const option = {
      xAxis: {
        type: 'category',
        data: days // 使用API返回的日期数组作为x轴的数据
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.value,
          type: 'bar'
        }
      ]
    };
  
    myChart.setOption(option);
  };
  </script>
  
  <style scoped>
  .chart-container {
    width: 100%;
    height: 400px;
  }
  </style>